<!DOCTYPE html>
<!-- release v4.1.8, copyright 2014 - 2015 Kartik Visweswaran -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>本站概况</title>
    <link rel="shortcut icon" href="https://hellohao.nos-eastchina1.126.net/BlogImg/favicon.ico" type="image/x-icon"/>
    <link rel="icon" type="image/ico" href="https://hellohao.nos-eastchina1.126.net/BlogImg/favicon.ico"/>
    <link th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/static/css/font-awesome.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/static/css/style.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/static/css/toastr.min.css}" media="all" rel="stylesheet" type="text/css"/>
    <link th:href="@{/static/css/login-register.css}" media="all" rel="stylesheet" type="text/css"/>
    <link th:href="@{/static/css/bootstrap-table.css}" media="all" rel="stylesheet" type="text/css"/>
    <link th:href="@{/static/css/sweetalert.min.css}" media="all" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" media="all" th:href="@{/static/css/daterangepicker-bs3.css}"  />
    <link rel="stylesheet" th:href="@{/layui/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/viewer.css}">

    <script th:src="@{/static/js/jquery-3.4.1.min.js}" type="text/javascript"></script>
    <script th:src="@{/static/js/bootstrap.min.js}" type="text/javascript"></script>
    <script th:src="@{/static/js/toastr.min.js}" type="text/javascript"></script>
    <script th:src="@{/static/js/login-register.js}"></script>
    <script th:src="@{/static/bootstrap-3.3.4-dist/js/bootstrap-table-hellohao1.13.1.js}"></script>
    <script th:src="@{/static/js/clipboard.min.js}"></script>
    <script th:src="@{/static/js/jqBootstrapValidation.min.js}"></script>
    <script th:src="@{/static/js/bootbox.min.js}"></script>
    <script th:src="@{/static/js/sweetalert.min.js}"></script>
    <script th:src="@{/layui/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/mustache.min.js}"></script>

    <script th:src="@{/static/js/moment.js}"></script>
    <script th:src="@{/static/js/daterangepicker.js}"></script>
    <script th:src="@{/js/viewer.min.js}"></script>

    <!-- 样式 -->
    <style type="text/css">
        .kv-main {
            padding: 13px;
        }
        pre {
            color: #000;
            line-height: 16px;
            font-size: 13px;
            font-weight: bold;
            white-space: pre-wrap;
            word-wrap: break-word;
        }

    </style>
</head>
<body>

<div class="container kv-main">

    <div id="isimgs">

        <table class="table table-bordered ft-table table-hover" id="table_server">
            <hr/>
                <div class="btn-group">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                            批量操作 <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#" onclick="deleall();">删除选中</a></li>
                        </ul>
                    </div>
                    <div class="btn-group" th:if=" ${level} gt '1'">
                        <span style="margin-left: 70px;line-height: 36px;">列表显示：</span>
                    </div>
                    <div class="btn-group" th:if=" ${level} gt '1'">
                        <select id="myselect" class="form-control">
                            <option value="1" checked="checked">所有人</option>
                            <option value="2">仅自己</option>
                        </select>
                    </div>
                    <div class="btn-group">
                        <span style="margin-left: 20px;line-height: 36px;">存储源：</span>
                    </div>
                    <div class="btn-group">
                        <select id="StorageType" class="form-control">
                            <option value="0">所有</option>
                            <option value="5">本地存储</option>
                            <option value="1">网易NOS</option>
                            <option value="2">阿里OSS</option>
                            <option value="3">又拍USS</option>
                            <option value="4">七牛云KODO</option>
                            <option value="6">腾讯COS</option>
                        </select>
                    </div>
                    <div class="btn-group">
                        <span style="margin-left: 20px;line-height: 36px;">时间：</span>
                    </div>
                    <div class="input-prepend input-group">
                        <span class="add-on input-group-addon" onclick="thisclear()">
                            <i class="glyphicon glyphicon-repeat" ></i>
                        </span>
                        <input  type="text" readonly style="width: 200px" name="reservation" id="reservation" class="form-control" />
                        <div class="btn-group">
                            <a style="margin-left: 50px;" type="button" class="btn btn-info" onclick="screening();">筛选</a>
                        </div>
                    </div>
                </div>
        </table>
    </div>

</div>
<hr/>
<!--<footer class="footer " th:include="footer::foot"></footer>-->
<img id="linshi" style="display:none;" src="#"/>
</body>

<script type="application/javascript">
    var layer;
    layui.use('layer', function () {
        layer = layui.layer;
    });

    var t;
    $(function () {
        var loginid = [[${loginid}]];
        //var source = [[${source}]];
       // $("#source").text(str);
        toastr.options.positionClass = 'toast-bottom-right';
        toastr.options = {
            closeButton: true,//是否显示关闭按钮
            debug: false,
            progressBar: true,
            positionClass: "toast-bottom-right",
            onclick: null,
            showDuration: "300",
            hideDuration: "1000",
            timeOut: "2000",
            extendedTimeOut: "1000",
            showEasing: "swing",
            hideEasing: "linear",
            showMethod: "fadeIn",
            hideMethod: "fadeOut"
        };
//日历表单
        $(document).ready(function() {
            $('#reservation').daterangepicker(null, function(start, end, label) {
                //console.log(start.toISOString(), end.toISOString(), label);
            });
        });

        // 分页
        fenye('/admin/selecttable', 1);//1代表查询所有人

        // $("#myselect").change(function () {
        //     var opt = $("#myselect").val();
        //     // 先销毁table中的数据
        //     $("#table_server").bootstrapTable('destroy');
        //     fenye('/admin/selecttable', opt);
        // });

        //获取本站概况
        // $.ajax({
        //     type: "POST",
        //     url: "/admin/getwebconfig",
        //     dataType: "json",
        //     success: function (data) {
        //         $("#counts").text(data.counts);
        //         $("#getusertotal").text(data.getusertotal);
        //         $("#imgreviewcount").text(data.imgreviewcount);
        //         $("#usercount").text(data.usercount);
        //         var str = "";
        //         if (data.source == 1) {
        //             str = "网易NOS";
        //         } else if (data.source == 2) {
        //             str = "阿里OSS";
        //         } else if (data.source == 3) {
        //             str = "又拍USS";
        //         } else if (data.source == 4) {
        //             str = '七牛KODO';
        //         } else {
        //             str = '未知';
        //         }
        //         $("#source").text(str);
        //     }
        // });
    });
    function screening(){
        $("#table_server").bootstrapTable('destroy');
        var myselect = $('#myselect').val();
        var StorageType = $('#StorageType').val();
        var reservation = $('#reservation').val();
        var arr=new Array();
        if(reservation!=''){
            arr=reservation.split(' - ');
            fenye('/admin/selecttable', myselect,StorageType,arr[0],arr[1]);
        }else{
            fenye('/admin/selecttable', myselect,StorageType,null,null);
        }

    }
    function deleall() {
        swal({
                title: "确认删除选中图片？",
                text: "删除后将无法恢复，请谨慎操作。",
                type: "warning",
                showCancelButton: true,//true显示两个按钮
                confirmButtonColor: "#A5DC86",
                confirmButtonText: "确定",
                cancelButtonText: "取消",
            },
            function (isConfirm) {
                if (isConfirm) {
                    var rows = $("#table_server").bootstrapTable('getSelections');
                    if (rows.length == 0) {// rows 主要是为了判断是否选中，下面的else内容才是主要
                        swal("请先勾选图片再删除", "目前未选中任何图片", "error");
                        return;
                    } else {
                        var ids = new Array();// 声明一个数组
                        $(rows).each(function () {// 通过获得别选中的来进行遍历
                            ids.push(this.id);// cid为获得到的整条数据中的一列
                        });
                        deleallimg(ids);
                    }
                } else {//swal("取消！", "你的虚拟文件是安全的:)","error");
                    //return;
                }
            });
    }

    function deleallimg(ids) {
        layer.load(1);
        $.ajax({
            type: "POST",
            url: "/admin/deleallimg",
            data: {ids: ids},
            dataType: "json",
            success: function (data) {
                if (data.val > 0) {
                    layer.closeAll('loading');
                    $("#table_server").bootstrapTable('refresh', t);
                    swal({
                            title: "删除成功",
                            text: "已成功删除所选图片。",
                            type: "success",
                            showCancelButton: false,//true显示两个按钮
                            confirmButtonColor: "#A5DC86",
                            confirmButtonText: "确定",
                            //cancelButtonText: "取消删除！",
                            closeOnConfirm: true,
                            closeOnCancel: false
                        },
                        function (isConfirm) {
                            if (isConfirm) {
                                //swal("我知道了！", "你已经点确认了。","success");
                            } else {//swal("取消！", "你的虚拟文件是安全的:)","error");
                            }
                        });

                } else {
                    layer.closeAll('loading');
                    //swal("删除失败", "您所选的图片没有完全删除","error");
                    $("#table_server").bootstrapTable('refresh', t);
                }
                $("#imgcount").text(data.count);
                $("#usercount").text(data.usercount);
                $("#imgreviewcount").text(data.imgreviewcount);


            }
        });
    }

    function exit() {
        $.ajax({
            type: "POST",
            url: "/user/exit.do",
            dataType: "json",
            success: function (data) {
                toastr.success("账号已退出。");
                window.location.reload();
            }
        });
    }

    //删除
    function deleimg(id, sourcekey) {
        swal({
                title: "确认是否删除该图片?",
                text: "删除后将无法恢复，请谨慎操作。",
                type: "warning",
                showCancelButton: true,//true显示两个按钮
                confirmButtonColor: "#A5DC86",
                confirmButtonText: "确定",
                cancelButtonText: "取消",
            },
            function (isConfirm) {
                if (isConfirm) {
                    $.ajax({
                        type: "POST",
                        url: "/admin/deleimg",
                        data: {id: id, sourcekey: sourcekey},
                        dataType: "json",
                        success: function (data) {
                            if (data.val > 0) {
                                $("#table_server").bootstrapTable('refresh', t);
                                toastr.success("删除成功");
                                $("#imgcount").text(data.count);
                                $("#usercount").text(data.usercount);
                            } else {
                                toastr.error("删除失败");
                                $("#table_server").bootstrapTable('refresh', t);
                            }
                        }
                    });
                } else {//swal("取消！", "你的虚拟文件是安全的:)","error");
                    return;
                }
            });
    }

    function copy(data) {
        var copy = new ClipboardJS('.btn', {
            text: function (trigger) {
                return  data;
            }
        });
        copy.on('success', function (e) {
            toastr.success("复制成功");
            copy.off("success");
        });
        copy.on('error', function (e) {
            toastr.error("复制失败");
            copy.off("error");
        });
    }

    function lookimgs(urls) {
        var index=urls.lastIndexOf("\.");
        var str =urls.substring(index+1,urls.length);
        if(str=='png' || str=='jpg' || str=='GIF' || str=='bmp' || str=='jpeg'){
            layer.load(1);
            var w = 0;
            var h = 0;
            var dw = document.body.clientWidth;
            var dh = document.body.clientHeight;
            $("#linshi").attr('src', urls);
            $("#linshi").off("load");
            $("#linshi").on("load", function () {
                w = $(this).width();
                h = $(this).height();
                layer.closeAll('loading');
                layer.open({
                    type: 1,
                    title: false,
                    closeBtn: 0,
                    area: 'auto',
                    skin: 'layui-layer-nobg', //没有背景色
                    shadeClose: true,
                    content: '<div style="width:'+ dw * 0.7 + 'px;height:auto;text-align:center;float:none;margin-left:auto;margin-right:auto;"></div><img style="height: 100%;width: 100%;max-width:' + dw * 0.7 + 'px;max-height: ' + dh * 0.7 + 'px" src="' + urls + '">'
                });
            });
        }
    }

    function fenye(url, selecttype,StorageType,starttime,stoptime) {
        t = $("#table_server").bootstrapTable({
            url: url,
            method: 'get',
            cache: false,//关闭本地磁盘缓存，
            dataType: "json",
            striped: true,//设置为 true 会有隔行变色效果
            undefinedText: "空",//当数据为 undefined 时显示的字符
            pagination: true, //分页
            showRefresh: true,
            paginationLoop: true,//设置为 true 启用分页条无限循环的功能。
            showToggle: "true",//是否显示 切换试图（table/card）按钮
            showColumns: "true",//是否显示 内容列下拉框
            pageNumber: 1,//如果设置了分页，首页页码
            // showPaginationSwitch:true,//是否显示 数据条数选择框
            pageSize: 10,//如果设置了分页，页面数据条数
            pageList: [5, 10, 20, 40],	//如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
            paginationPreText: '‹',//指定分页条中上一页按钮的图标或文字,这里是<
            paginationNextText: '›',//指定分页条中下一页按钮的图标或文字,这里是>
            // singleSelect: false,//设置True 将禁止多选
            search: false, //显示搜索框
            data_local: "zh-CN",//表格汉化
            sidePagination: "server", //服务端处理分页
            queryParams: function (params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的
                return {//这里的params是table提供的
                    pageNum: (params.offset / params.limit) + 1,//从数据库第几条记录开始
                    pageSize: params.limit//找多少条
                    , selecttype: selecttype
                    ,storageType:StorageType
                    ,starttime:starttime
                    ,stoptime:stoptime
                };
            },
            idField: "链接",//指定主键列
            columns: [{
                checkbox: true
            },
                // {
                //     title: '#',//表的列名<input id="isall" type="checkbox" onclick="checkboxOnclick(this)">
                //     formatter: function (value, rows, index) {
                //         //return index+1; //序号正序排序从1开始
                //         var pageSize = $('#table_server').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
                //         var pageNumber = $('#table_server').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
                //         return pageSize * (pageNumber - 1) + index + 1;    //返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
                //     },
                //     align: 'center'//水平居中
                // },
                {
                    title: '链接',
                    formatter: function (value, rows, index) {
                        var view = {
                            imgurl: rows.imgurl
                        };
                        var output = Mustache.render('<a style="cursor:pointer;" onclick="lookimgs(\'{{&imgurl}}\')">{{imgurl}}</a>', view);
                        return output;
                        //return "<a style=\"cursor:pointer;\" onclick='lookimgs(\"" + rows.imgurl + "\");'>" + rows.imgurl + "</a>";
                    },
                    align: 'center'
                },
                {
                    title: '日期',
                    field: 'updatetime',
                    align: 'center'
                },
                {
                    //EMAIL
                    title: '大小',
                    formatter: function (value, rows, index) {
                        return rows.sizes + "k";
                    },
                    align: 'center'
                },
                {
                    //EMAIL
                    title: '存储源',
                    formatter: function (value, rows, index) {
                        var source = '';
                        if (rows.source == 1) {
                            source = '网易NOS';
                        } else if (rows.source == 2) {
                            source = '阿里OSS';
                        } else if (rows.source == 3) {
                            source = '又拍USS';
                        } else if (rows.source == 4) {
                            source = '七牛KODO';
                        } else if (rows.source == 5) {
                            source = '本地存储';
                        }else if (rows.source == 6) {
                            source = '腾讯COS';
                        }
                        else {
                            source = '未知';
                        }
                        return source;
                    },
                    align: 'center'
                },
                {
                    //EMAIL
                    title: '用户',
                    formatter: function (value, rows, index) {
                        var names = "";
                        if (rows.username == null) {
                            names = "游客";
                        } else {
                            names = rows.username;
                        }
                        return names;
                    },
                    align: 'center'
                },
                {
                    //部门名字
                    title: '操作',
                    formatter: function (value, rows, index) {
                        var htm = "<a onclick='deleimg(" + rows.id + "," + rows.source + ")' class='btn btn-danger btn-xs'>删除</a>" + "&nbsp;&nbsp;&nbsp;";
                        htm += '<a onclick="copy(\'' + rows.imgurl +
                            '\')" class="btn btn-info btn-xs">复制</a>';
                        return htm;
                    },
                    align: 'center'
                }
            ]
        });
        t.on('load-success.bs.table', function (data) {//table加载成功后的监听函数
            console.log("load success");
            $(".pull-right").css("display", "block");
        });
    }

    function thisclear() {
        $('#reservation').val('');
    }

</script>
</html>